import { my_platform_guidance_list, patient_guidance_list } from '@/services/guide';
import age from '@/utils/age';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Tabs, Tooltip } from 'antd';
import moment from 'moment';
import { useRef, useState } from 'react';
import InHospitalGuide from './components/InHospitalGuide';
import InHospitalGuideDetail from './components/InHospitalGuideDetail';
import RemoteGuide from './components/RemoteGuide';
import RemoteGuideDetail from './components/RemoteGuideDetail';
type GithubIssueItem = {
  id: number;
  phone: string;
  username: string;
  sex: string;
  plan_time: string;
  age: string;
  plan_at: string;
  id_card: string;
  birth: string;
  address: string;
  province: string;
  city: string;
  area: string;
  family_address: string;
  status: number;
  patient_id: number;
};
const MyGuide = () => {
  const actionRef = useRef<ActionType>();
  const actionRef1 = useRef<ActionType>();
  // 控制院内指导模态框状态
  const [inHospitalModal, setInHospitalModal] = useState(false);
  // 控制院内指导详情模态框状态
  const [inHospitalDetailModal, setInHospitalDetailModal] = useState(false);
  // 存储院内指导计划id
  const [guideId, setGuideId] = useState<number>();
  // 存储院内指导患者id
  const [patientId, setPatientId] = useState<number>();
  // 控制远程指导模态框状态
  const [remoteModal, setRemoteModal] = useState(false);
  // 存储远程指导记录id
  const [remodeId, setRemoteId] = useState<number>();
  // 控制远程指导详情模态框的状态
  const [remoteDetailModal, setRemoteDetailModal] = useState(false);

  // 控制院内指导模态框的显示与隐藏
  const isShowInHospitalModal = (status: boolean) => {
    actionRef.current?.reload();
    setInHospitalModal(status);
  };
  // 控制院内指导详情模态框的显示与隐藏
  const isShowInHospitalDetailModal = (status: boolean) => {
    setInHospitalDetailModal(status);
  };
  // 控制远程指导模态框的显示与隐藏
  const isShowRemoteModal = (status: boolean) => {
    setRemoteModal(status);
    actionRef1.current?.reload();
  };
  // 控制远程指导详情模态框的显示与隐藏
  const isShowRemoteDetailModal = (status: boolean) => {
    setRemoteDetailModal(status);
  };

  // 院内指导列表
  const get_popular_plan_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      range: 'my',
    };
    // console.log(params);
    const res = await patient_guidance_list(request_body);
    console.log('院内指导计划', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 远程指导列表
  const get_my_platform_guidance_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
    };
    // console.log(params);
    const res = await my_platform_guidance_list(request_body);
    console.log('远程指导列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 切换tab
  const changeTab = (key: string) => {
    if (key == '院内指导') {
      actionRef.current?.reload();
    } else if (key == '远程指导') {
      actionRef1.current?.reload();
    }
  };

  // 院内指导
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      hideInSearch: true,
      valueType: 'index',
      align: 'center',
    },
    {
      title: '患者账号',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '患者姓名',
      dataIndex: 'patient_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '患者姓名',
      dataIndex: 'name',
      hideInTable: true,
    },
    {
      title: '患者性别',
      dataIndex: 'sex',
      hideInSearch: true,
      align: 'center',
      valueEnum: {
        0: {
          text: '未知',
        },
        1: {
          text: '男',
        },
        2: {
          text: '女',
        },
      },
    },
    {
      title: '患者年龄',
      dataIndex: 'birth',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return age(record.birth);
      },
    },
    {
      title: '身份证号',
      dataIndex: 'id_card',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '家庭地址',
      dataIndex: 'address',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return record.province ? (
          <Tooltip title={record.province + record.city + record.area + record.family_address}>
            {(record.province + record.city + record.area + record.family_address).length > 10
              ? (record.province + record.city + record.area + record.family_address).substring(
                  0,
                  10,
                ) + '...'
              : record.province + record.city + record.area + record.family_address}
          </Tooltip>
        ) : (
          record.family_address
        );
      },
    },
    {
      title: '计划指导时间',
      dataIndex: 'plan_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return moment(record.plan_time).format('YYYY-MM-DD');
      },
    },
    {
      title: '计划指导时间',
      dataIndex: 'plan_time',
      valueType: 'dateRange',
      hideInTable: true,
      colSize: 2,
      search: {
        transform: (value: any[]) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      align: 'center',
      valueEnum: {
        0: {
          text: '未开始',
        },
        1: {
          text: '进行中',
        },
        2: {
          text: '已完成',
        },
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: true,
      valueType: 'select',
      valueEnum: {
        0: {
          text: '未开始',
        },
        1: {
          text: '进行中',
        },
        2: {
          text: '已完成',
        },
      },
      initialValue: '0',
    },
    {
      title: '操作',
      hideInSearch: true,
      key: 'action',
      align: 'center',
      render: (_: any, record: { id: number; status: number; patient_id: number }) => (
        <>
          {record.status === 0 || record.status === 1 ? (
            <a
              key="check"
              onClick={() => {
                setGuideId(record.id);
                setPatientId(record.patient_id);
                isShowInHospitalModal(true);
              }}
            >
              指导
            </a>
          ) : (
            ''
          )}
          {record.status == 2 ? (
            <a
              key="info"
              onClick={() => {
                setGuideId(record.id);
                // isShowCheckVisible(true, record.old_id, record.id, 1);
                isShowInHospitalDetailModal(true);
              }}
            >
              详情
            </a>
          ) : (
            ''
          )}
        </>
      ),
    },
  ];
  // 远程指导
  const columns1: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      hideInSearch: true,
      valueType: 'index',
      align: 'center',
    },
    {
      title: '预约账号',
      dataIndex: 'platform_phone',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '预约账号',
      dataIndex: 'phone',
      hideInTable: true,
    },
    {
      title: '机构名称',
      dataIndex: 'platform_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '机构名称',
      dataIndex: 'name',
      hideInTable: true,
    },
    {
      title: '计划指导时间',
      dataIndex: 'plan_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '计划指导时间',
      dataIndex: 'plan_time',
      valueType: 'dateRange',
      hideInTable: true,
      colSize: 2,
      search: {
        transform: (value: any[]) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: true,
      valueType: 'select',
      valueEnum: {
        0: {
          text: '待指导',
        },
        1: {
          text: '已指导',
        },
      },
    },
    {
      title: '操作',
      hideInSearch: true,
      key: 'action',
      align: 'center',
      render: (_: any, record: { status: number; id: number }) =>
        record.status == 0 ? (
          <Button
            key="check"
            type="link"
            onClick={() => {
              setRemoteId(record.id);
              isShowRemoteModal(true);
            }}
          >
            指导
          </Button>
        ) : (
          <Button
            key="check"
            type="link"
            onClick={() => {
              setRemoteId(record.id);
              isShowRemoteDetailModal(true);
            }}
          >
            详情
          </Button>
        ),
    },
  ];
  return (
    <PageContainer breadcrumb={false}>
      <Tabs
        defaultActiveKey="院内指导"
        onChange={changeTab}
        items={[
          {
            key: '院内指导',
            label: '院内指导',
            children: (
              <ProTable
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params = {}) => get_popular_plan_list(params)}
                editable={{
                  type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 4,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="院内指导列表"
              />
            ),
          },
          {
            key: '远程指导',
            label: '远程指导',
            children: (
              <ProTable
                columns={columns1}
                actionRef={actionRef1}
                cardBordered
                request={async (params = {}) => get_my_platform_guidance_list(params)}
                editable={{
                  type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 4,
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="远程指导列表"
              />
            ),
          },
        ]}
      />
      {/* 院内指导模态框 */}
      {inHospitalModal ? (
        <InHospitalGuide
          isShowInHospitalModal={isShowInHospitalModal}
          inHospitalModal={inHospitalModal}
          guideId={guideId}
          patientId={patientId}
          actionRef={actionRef}
        ></InHospitalGuide>
      ) : (
        ''
      )}
      {/* 院内指导详情模态框 */}
      {inHospitalDetailModal ? (
        <InHospitalGuideDetail
          isShowInHospitalDetailModal={isShowInHospitalDetailModal}
          inHospitalDetailModal={inHospitalDetailModal}
          guideId={guideId}
        ></InHospitalGuideDetail>
      ) : (
        ''
      )}
      {/* 远程指导模态框 */}
      {remoteModal ? (
        <RemoteGuide
          isShowRemoteModal={isShowRemoteModal}
          remoteModal={remoteModal}
          remodeId={remodeId}
        ></RemoteGuide>
      ) : (
        ''
      )}
      {/* 远程指导详情模态框 */}
      {remoteDetailModal ? (
        <RemoteGuideDetail
          isShowRemoteDetailModal={isShowRemoteDetailModal}
          remoteDetailModal={remoteDetailModal}
          remodeId={remodeId}
        ></RemoteGuideDetail>
      ) : (
        ''
      )}
    </PageContainer>
  );
};
export default MyGuide;
